<template>
  <div class="home">
    <div class="content">
      <!-- 表单区域 -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <img src="@/assets/images/Login/logo1.jpg" />
        <div class="content_title">重置密码</div>
        <div class="content_select">
          <div class="input">
            <el-form-item prop="phone">
              <el-input
                placeholder="请输入手机号"
                v-model="ruleForm.phone"
                type="number"
                @blur="checkPhone"
              >
                <el-select v-model="ruleForm.select" slot="prepend">
                  <el-option label="+86" value="1"></el-option>
                  <el-option label="+84" value="2"></el-option>
                  <el-option label="+85" value="3"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </div>
          <div class="code">
            <el-form-item prop="code">
              <el-input placeholder="请输入验证码" v-model="ruleForm.code"></el-input>
              <el-button type="success" @click="getCode" :loading="isCode" v-if="!exitCode">发送验证码</el-button>
              <el-button type="success" @click="getCode" :loading="isCode" v-else>重新发送</el-button>
            </el-form-item>
          </div>
        </div>
        <el-form-item class="btn">
          <el-button @click="nextRest" :loading="isActive">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 底部区域 -->
    <Footer class="footer"></Footer>
  </div>
</template>

<script>
import Footer from '@/components/content/LoginFooter/LoginFooter'

import { getUserInfo } from '@/components/network/Login/login.js'
import { upUserId } from '@/components/network/Rest/rest.js'
export default {
  components: {
    Footer
  },
  data() {
    const phoneRule = (rule, value, callback) => {
      if (!value) {
        return callback()
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的手机号'))
        }
      }
    }
    return {
      ruleForm: {
        phone: '',
        code: '',
        select: '+86'
      },
      rules: {
        phone: [{ validator: phoneRule, trigger: 'blur' }]
      },
      exitCode: false,
      isCode: false,
      userlist: [],
      isActive: false
    }
  },
  created() {
    this.keyupSubmit()
    this.getUserInfos()
  },
  methods: {
    // 点击回车触发按钮
    keyupSubmit() {
      document.onkeydown = e => {
        const _key = window.event.keyCode
        if (_key === 13) {
          this.nextRest()
        }
      }
    },
    async getUserInfos() {
      const res = await getUserInfo()
      this.userlist = res
    },
    // 获取验证码
    getCode() {
      const codeNum = parseInt((Math.random() * 9 + 1) * 100000)
      this.isCode = true
      setTimeout(() => {
        this.isCode = false
        this.ruleForm.code = codeNum
        this.exitCode = true
      }, 1000)
    },
    // 检查手机号是否存在
    checkPhone() {
      let isExit = false
      if (this.ruleForm.phone !== '') {
        for (let i = 0; i < this.userlist.length; i++) {
          if (this.userlist[i].phone === this.ruleForm.phone) {
            isExit = true
          }
        }
        if (!isExit) {
          this.ruleForm.phone = ''
          this.$message.warning('你输入的号码不存在！')
        }
      }
    },
    async nextRest() {
      if (!(this.ruleForm.code && this.ruleForm.phone)) {
        this.$message.warning('请输入手机号或者验证码！')
      } else {
        this.isActive = true
        for (let i = 0; i < this.userlist.length; i++) {
          if (this.userlist[i].phone === this.ruleForm.phone) {
            // console.log(res[i].id)
            await upUserId({ index: this.userlist[i].id })
            setTimeout(() => {
              this.isActive = false
              this.$router.push('/nextRest')
            }, 1000)
          }
        }
      }
    }
  }
}
</script>
<style scoped>
.home {
  height: 782px;
  background-color: #f7f7f7;
  padding-top: 155px;
}
.home .footer {
  margin-top: 220px;
}
.btn {
  margin-top: 80px;
}
.code {
  margin-top: 50px;
}
.input .el-select {
  background-color: #fff;
  width: 70px;
}
.input .el-input {
  width: 340px;
}
.code .el-input {
  width: 200px;
}
.code .el-button {
  height: 50px;
  margin-left: 10px;
}
.content {
  background-color: #fff;
  text-align: center;
  margin: 0 auto;
  height: 60%;
  width: 45%;
}
.content .el-form {
  width: 345px;
  margin: 0 auto;
}
.content .content_title {
  margin: 30px 0;
  font-size: 30px;
}
.content .content_select .select select {
  width: 325px;
  height: 44px;
  border: 1px solid #eeeeee;
  padding-left: 8px;
}
.content .content_input {
  margin-top: 20px;
}
.content .content_input .input select {
  width: 70px;
  height: 44px;
  border-top: 1px #eeeeee solid;
  border-left: 1px #eeeeee solid;
  border-bottom: 1px #eeeeee solid;
  border-right: 0px;
  padding-left: 10px;
}
.content .content_input .input input {
  width: 255px;
  height: 44px;
  border: 1px #eeeeee solid;
}
.btn .el-button {
  background: #ff6700;
  color: #fff;
  width: 340px;
}
</style>
